// 起重机械
<template>
    <f7-page
        ptr
        @ptr:refresh="refresh"
        infinite
        :infinite-distance="50"
        :infinite-preloader="true"
        @infinite="infinite"
        class="common-page"
    >
        <f7-navbar>
            <f7-nav-left>
                <f7-link back icon-material="chevron_left" force></f7-link>
            </f7-nav-left>
            <f7-nav-title>起重机械</f7-nav-title>
            <!-- 查询参数图标 -->
            <f7-nav-right @click.native="showSearch = true">
                <img
                    src="../../../../assets/img/qzjx/filter.png"
                    alt="toolbar-icon"
                    style="width: 22px"
                />
            </f7-nav-right>
        </f7-navbar>
        <div class="search-box">
            <van-search
                v-model="search.keyword"
                @search="searchQuery"
                @clear="reset"
                shape="round"
                background="#1990ff"
                placeholder="备案号/工程名称"
            />
        </div>
        <div style="margin-top: 55px;">
            <f7-list
                media-list
                class="search-list"
                v-if="query.data.length > 0"
            >
                <li
                    v-for="(item, index) in query.data"
                    :key="index"
                    @click="detail(item)"
                    class="content-box"
                >
                    <img
                        :src="
                            require(`../../../../assets/img/qzjx/${
                                item.equipmentType || 'TSQZJ'
                            }.png`)
                        "
                        alt=""
                        class="left-box"
                    />
                    <div class="right-box">
                        <div class="title-box">
                            <h3>
                                {{ item.propertyCode }}
                                <span
                                    v-if="item.workSiteCode"
                                    style="color: #8995ac; font-size: 14px"
                                    >【{{ item.workSiteCode }}】</span
                                >
                            </h3>
                        </div>
                        <p>用于工程：{{ item.engineeName || '--' }}</p>
                        <!-- <div class="tag-box">
                            <span class="tag tag-yellow">使用登记牌过期</span>
                            <span class="tag tag-yellow">未及时检测</span>
                        </div> -->
                    </div>
                </li>
            </f7-list>
            <v-empty v-else description="暂无数据" />
        </div>
        <!-- 搜索 -->
        <v-popup-search
            v-model="showSearch"
            title="筛选"
            :searchData="searchData"
            @btn:click="searchBtn"
        ></v-popup-search>
        <!-- 搜索 end -->
    </f7-page>
</template>

<script>
import controller from '@/libs/framework/controller'
import vPopupSearch from '@/libs/zjk/popup-search/qm-popup-search.vue'
export default class instance extends controller {
    onBeforeInit() {
        this.urls = {
            model: '/app/equipment/eqmProperty/getListModel',
            query: '/app/statistics/crane/queryList',
        }
    }
    onInit() {
        this.setSearch('engineeCode', this.$f7route.query.engineeCode, 'list')
        this.setSearch('engineeId', this.$f7route.query.engineeId, 'list')
        this.setSearch('propertyStatus', this.$f7route.query.propertyStatus, 'list')
    }

    onAfterQuery(type, isSuccess, result) {
        if (type == 'form') {
            if (result.controlData.equipmentTypes) {
                this.$data.searchData[1].columns =
                    result.controlData.equipmentTypes
            }
            if (result.controlData.auditStatuses) {
                result.controlData.auditStatuses.forEach((element) => {
                    element.code = element.value
                    element.name = element.key
                })
                this.$data.searchData[2].columns =
                    result.controlData.auditStatuses
            }
        }
        return result
    }

    mixin() {
        return {
            components: {
                vPopupSearch,
            },
            data() {
                return {
                    search: {},
                    showSearch: false,
                    // 搜索的配置
                    searchData: [
                        {
                            type: 'input2',
                            key: 'keyword',
                            placeholder: '备案号、工程名称',
                        },
                        {
                            type: 'radio',
                            key: 'equipmentType',
                            label: '设备类型',
                            columns: [],
                        },
                        {
                            type: 'checkbox',
                            key: 'repairStatus',
                            label: '异常类型',
                            columns: [],
                        },
                    ],
                }
            },
            methods: {
                showTime1(date) {
                    if (date) {
                        return formatter.formatDate(date, 'yyyy-MM-dd')
                    } else {
                        return '--'
                    }
                },

                searchBtn({ data }) {
                    Object.assign(this.search, data)
                    this.searchQuery(this.search, 'list')
                },
                reset() {
                    this.search.enterpriseName = ''
                    this.searchQuery()
                },
                // 详情
                detail(item) {
                    this.$f7router.navigate(
                        `/business/qzjx/equipment/detail?groupId=${item.groupId}&propertyId=${item.propertyId}`
                    )
                },
            },
            mounted() {},
        }
    }
}
</script>

<style lang="less" scoped>
@import url('../../../../assets/css/commonPage.less');
.common-page .search-list {
    .right-box {
        .tag-box {
            margin-top: 10px;
        }
        .tag {
            padding: 3px 6px;
            border-radius: 4px;
            background: #ffffff;
            border-radius: 4px;
            border: 1px solid #ff9f24;
            color: #ff9f24;
            font-size: 12px;
        }
    }
}
.search-box {
    position: fixed;
    width: 100%;
    z-index: 99;
}
</style>
